import React from 'react';
import { Row, Col, Spin, Steps } from 'antd';
import { useAntdTable, useBoolean } from 'ahooks';
import Cookies from 'js-cookie';
import { If } from 'babel-plugin-jsx-control-statements';
import RequestApi from '@/utils/request';
import css from './index.scss';

/**
 * @deprecated 经营者首页面中数据暂时部分
 */
const List = () => {
	const { Step } = Steps;
	const userId = Cookies.get('id');
	const getRecentRecordList = async () => {
		const res = await RequestApi.connection('get', `parkLotRecordTask/getRecentRecordList/${userId}`);
		return res;
	};
	// 联动useAntTable获取异步数据
	const { tableProps } = useAntdTable(getRecentRecordList, {
		formatResult: (response) => ({
			list: response.data.rows, // 展示的数据
		}),
	});
	return (
		<div>
			<If condition={tableProps.dataSource.length === 0 || tableProps.dataSource.length !== 2}>
				<div>暂时还无数据</div>
			</If>
			<If condition={tableProps.dataSource.length !== 0 && tableProps.dataSource.length === 2}>
				<div>
					<div className={css.list}>
						<p>
							{tableProps.dataSource[0].name}
							的更变情况
						</p>
						<Steps current={tableProps.dataSource[0].status}>
							<Step title="在线备案" />
							<Step title="资料初审" />
							<Step title="现场勘查" />
							<Step title="备案复审" />
						</Steps>
					</div>
					<div className={css.list}>
						<p>
							{tableProps.dataSource[1].name}
							的更变情况
						</p>
						<Steps current={tableProps.dataSource[1].status}>
							<Step title="在线备案" />
							<Step title="资料初审" />
							<Step title="现场勘查" />
							<Step title="备案复审" />
						</Steps>
					</div>
				</div>
			</If>
		</div>
	);
};

/**
 * @deprecated 经营者首页面
 */
export default () => {
	const userId = Cookies.get('id');
	const [loading, { setTrue, setFalse }] = useBoolean(false);
	const getParkStatusData = async () => {
		setTrue();
		const res = await RequestApi.connection('get', `parkLotRecordTask/getParkStatusData/${userId}`);
		setFalse();
		return res;
	};

	// 联动useAntTable获取异步数据
	const { tableProps } = useAntdTable(getParkStatusData, {
		formatResult: (response) => ({
			list: response.data.row, // 展示的数据
		}),
	});
	return (
		<If condition={tableProps !== undefined || tableProps.dataSource !== null}>
			<Spin spinning={loading} tip="加载中...">
				<div className={css.home}>
					<div className={css.header}>
						<div style={{ float: 'left' }}>
							<h3>我的备案</h3>
						</div>
						<div className={css.more}>查看更多&gt;&gt;</div>
					</div>
					<div className={css.content}>
						<Row>
							<Col span={4}>
								<div className={css.content_count}>
									<span>暂存</span>
									<br />
									<span className={css.number}>{tableProps.dataSource.hold}</span>
									<span>个</span>
								</div>
							</Col>
							<Col span={4}>
								<div className={css.content_count}>
									<span>审核中</span>
									<br />
									<span className={css.number}>{tableProps.dataSource.inReview}</span>
									<span>个</span>
								</div>
							</Col>
							<Col span={4}>
								<div className={css.content_count}>
									<span>已退回</span>
									<br />
									<span className={css.number}>{tableProps.dataSource.returned}</span>
									<span>个</span>
								</div>
							</Col>
							<Col span={4}>
								<div className={css.content_count}>
									<span>已完成</span>
									<br />
									<span className={css.number}>{tableProps.dataSource.finished}</span>
									<span>个</span>
								</div>
							</Col>
							<Col span={4}>
								<div className={css.content_count}>
									<span>已作废</span>
									<br />
									<span className={css.number}>{tableProps.dataSource.cancelled}</span>
									<span>个</span>
								</div>
							</Col>
						</Row>
						<Row>
							<Col span={24}>
								<div className={css.record}>
									<List />
								</div>
							</Col>
						</Row>
					</div>
				</div>
			</Spin>
		</If>
	);
};
